import React, { FC } from 'react'
import styled, { StyledComponent } from "styled-components"
import { IFinance } from '@/types/pages/finance/interface'
import Title from '@/components/pages/title'
import Count from '@/components/pages/count'
import Rate from '@/components/pages/crosswiseRate'
const SaleCount = styled.div<{ image?: string }>`
    width: 100%;
    height: 100%; 
    display: flex;
    flex-direction: column; 
 
    color:#fff;
    background-repeat: no-repeat; 
    .content:before{
      content: '';
      position: absolute; 
      width: 39.5rem;
      height: 21.5rem;
      top:38%;
      left:50%;
      transform: translate(-50%,-50%);
      background-color: rgba(6,31,79,0.5);
      border:1px solid #0A4F89; 
    }
    .content{
      flex:1 1 60%; 
      position: relative;
      .title{ 
        position: relative;
        margin-left: 6rem;
        color:#fff;
        font-weight: bold;
      }
      .cnn{ 
        display: flex;
        flex-direction: row;  
        padding: 4rem; 
        padding-top: 2rem; 
        .cylinder{
          flex: 1 1 40%;
          display: flex;
          align-items: center;
          justify-content: center; 
          .back{
            position: relative;
            width: 15rem;
            height: 10rem; 
            flex-direction: column; 
            background-image: url(${(props) => props.image});
            background-size: 100% 100%; 
            background-repeat: no-repeat; 
            .height{
              position: absolute;
              bottom:1rem;
              width: 6.3rem;
              height: 4.2rem;

            }
          }

        }  
        .count{
          flex: 1 1 50%;
          display: flex;
          flex-direction: column; 
 
        }
        /* .rate{
          flex: 1 1 25%;
          display: flex;
        } */
      }
      
    }
`

const Content: FC<Partial<IFinance> & {title:string, image?: string }> = function (props) {
  return (
    <SaleCount image={props.image}>
      <Title name={props.name!} />
      <div className='content'>
        <div className='title'>{props.title}</div>
        <div className='cnn'> 
          <div className='cylinder' >
            <div className='back' />  
          </div>
          <div className='count'><Count num={props.num!} unit={props.unit!} />
          <div className='rate'><Rate comparisonText={props.comparisonText} upDownStatus={props.upDownStatus!} saleRate={props.saleRate!} /></div>
          </div>
      
        </div>
      </div>
      <div className='bar' />
    </SaleCount>
  )
}

export default Content
